<template>
  <div class="home">
    <h1>{{num}}</h1>
    <h1>{{str}}</h1>
    <p>{{arr}}</p>
    <p>{{obj}}</p>
    <button @click="add">num++</button>
  </div>
   <!-- <div>123</div>
   <div>123</div> -->
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {ref} from 'vue'

export default {
  name: 'HomeView',
  
 setup(props) {
    // 习惯用const声明变量 因为vue.js的官网就是const 
    // const 声明的是常量不能更改  但是我们更改的是对象里面的 .value
    const num = ref(10)
    const str = ref('123456')
    const arr = ref([1,2,3,4,5])
    const obj = ref({
        name:'vue3',
        age:2
    })
    console.log(str.value);
    console.log(num);//
    console.log(arr.value);
    console.log(obj);
    const add = ()=>{
        num.value++
    }
   

    return {num,add,str,arr,obj}

 },
  components: {
    HelloWorld
  }
}
</script>
